<!DOCTYPE html>
<html>
<head>
<title>ZTREE DEMO</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
	var base = "${base}/";
</script>
<link rel="stylesheet" href="${base}/scripts/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="${base}/css/tree.css" type="text/css">
<script type="text/javascript" src="${base}/scripts/plugins/jquery-1.7.1.js"></script>
<script type="text/javascript" src="${base}/scripts/ztree/js/jquery.ztree.core-3.1.js"></script>
<script type="text/javascript" src="${base}/scripts/ztree/js/jquery.ztree.excheck-3.1.js"></script>
<script type="text/javascript" src="${base}/scripts/ztree/js/jquery.ztree.exedit-3.1.js"></script>
<!--引入弹窗组件-->
<script type="text/javascript" src="${base}/scripts/attention/zDialog/zDrag.js"></script>
<script type="text/javascript" src="${base}/scripts/attention/zDialog/zDialog.js"></script>
<script type="text/javascript">
$(function(){
	top.Dialog.close()
})
</script>
<script type="text/javascript">
	<#assign nodes = 0>
	var zNodes = [ 
		<#list roleUrlList as roleUrl>
			{
				id : ${(roleUrl.id)!0}, 
				pId :${(roleUrl.parentId)!0}, 
				name : "${(roleUrl.name)!''}", 
				open : false, 
				url : "${(roleUrl.url)!''}", 
				target:"url_right"
			}<#if roleUrl_index != (roleUrlList?size - 1)>
				,
			</#if>
			<#if (roleUrl.parentId) = 0>
				<#assign nodes = (nodes + 1)>
			</#if>
		</#list>
	];
	
	var setting = {
		view: {
			addHoverDom: addHoverDom,
			removeHoverDom: removeHoverDom,
			selectedMulti: false, 
			addDiyDom: addDiyDom
		},
		edit: {
			enable: true,
			inner: true
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			beforeEditName: beforeEditName,
			beforeRemove: beforeRemove,
			beforeRename: beforeRename,
			onRightClick: OnRightClick, 
			onRename: onRename, 
			beforeDrop: beforeDrop, 
			onDrop: onDrop
		}
	};
	
	var log, className = "dark";
	function beforeEditName(treeId, treeNode) {
		className = (className === "dark" ? "":"dark");
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		zTree.selectNode(treeNode);
	}
	
	function beforeDrop(treeId, treeNodes, targetNode, moveType) {
		if (confirm("确认移动" + treeNodes[0].name + "节点吗？")) {
			return true;
		}
		return false;
	}

	function onDrop(event, treeId, treeNodes, targetNode, moveType) {
		var parentId;
		if ((targetNode.isParent) || (targetNode.getParentNode() == null)) {
			parentId = 0;
		} else {
			parentId = targetNode.getParentNode().id;
		}
		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		var childNodes = treeObj.getSelectedNodes();
		if (childNodes.length > 0) {
			index = treeObj.getNodeIndex(childNodes[0]);
		}
		var nodes = treeObj.getNodes();
		var child;
		for (i in nodes) {
			if (nodes[i].id == parentId) {
				child = treeObj.getNodes()[i].children;
			}
		}
		if (parentId == 0) {
			for (index; index < nodes.length; index ++) {
				$.post("${base}/oauth/roleUrl/updateOrderNo.action", {"roleUrl.id" : nodes[index].id, "roleUrl.parentId" : parentId, "roleUrl.orderNo" : index}, function(data){});
			}
		} else {
			for (index; index < child.length; index ++) {
				$.post("${base}/oauth/roleUrl/updateOrderNo.action", {"roleUrl.id" : child[index].id, "roleUrl.parentId" : parentId, "roleUrl.orderNo" : index}, function(data){});
			}
		}
	}

	var IDMark_A = "_a";
	function addDiyDom(treeId, treeNode) {
		if (treeNode.parentNode && treeNode.parentNode.id!=2) return;
		var aObj = $("#" + treeNode.tId + IDMark_A);
		aObj.attr("href", "${base}/oauth/roleUrl/findUrlById.action?roleUrl.id=" + treeNode.id).attr("target", "url_right");
	}

	function beforeRemove(treeId, treeNode) {
		className = (className === "dark" ? "":"dark");
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		zTree.selectNode(treeNode);
		var childNodes = zTree.transformToArray(treeNode);
		if (childNodes.length > 1) {
			alert("该节点存在子节点，请先删除子节点");
			return false;
		}
		if(confirm("确认删除" + treeNode.name + "节点吗？")) {
			window.location.href = "${base}/oauth/roleUrl/delete.action?roleUrl.id=" + treeNode.id;
			return true;
		}
		return false;
	}
	
	function beforeRename(treeId, treeNode, newName) {
		className = (className === "dark" ? "":"dark");
		if (newName.length == 0) {
			alert("节点名称不能为空.");
			return false;
		}
		return true;
	}

	function onRename(e, treeId, treeNode) {
		$.post("${base}/oauth/roleUrl/updateNameInTree.action", {"roleUrl.id" : treeNode.id, "roleUrl.name" : treeNode.name}, function(data){});
	}

	var newCount = 1;
	function addHoverDom(treeId, treeNode) {
		var sObj = $("#" + treeNode.tId + "_span");
		if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) return;
		var addStr = "<button type='button' class='add' id='addBtn_" + treeNode.id
			+ "' title='添加新节点' onfocus='this.blur();'></button>";
		sObj.append(addStr);
		var btn = $("#addBtn_"+treeNode.id);
		if (btn) btn.bind("click", function(){
			openWin(treeNode.id);
			return false;
		});
	};
	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_"+treeNode.id).unbind().remove();
	};
	
	function OnRightClick(event, treeId, treeNode) {
		showRMenu(event.clientX, event.clientY);
	}
	
	var addCount = 1;
	function addRightNode() {
		hideRMenu();
		var orderNo = "${nodes}";
		window.location.href = "${base}/oauth/roleUrl/addRoleUrl.action?roleUrl.parentId=0&roleUrl.name=新URL资源&roleUrl.url=admin/open.action&roleUrl.isShow=1&roleUrl.orderNo=" + orderNo;
	}
	function showRMenu(x, y) {
		$("#rMenu ul").show();
		$("#rMenu").css({"top":y+"px", "left":x+"px", "visibility":"visible"});
		$("body").bind("mousedown", onBodyMouseDown);
	}
	function hideRMenu() {
		if ($("#rMenu")) $("#rMenu").css({"visibility": "hidden"});
		$("body").unbind("mousedown", onBodyMouseDown);
	}
	function onBodyMouseDown(event){
		if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
			rMenu.css({"visibility" : "hidden"});
		}
	}
	
	var zTree, rMenu;
	$(document).ready(function(){
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		zTree = $.fn.zTree.getZTreeObj("treeDemo");
		rMenu = $("#rMenu");
	});

function openWin(parentId) {
	var diag = new top.Dialog();
	diag.Title = "新增资源";
	diag.URL = "${base}/oauth/roleUrl/findAllUrl.action?roleUrl.parentId=" + parentId;
	diag.Height=400;
	diag.CancelEvent = function(){
		diag.innerFrame.contentWindow.location.reload();
		diag.close();
		};
	diag.show();
}

</script>
</head>
<body>
<div id="rMenu">
	<ul>
		<li id="m_add" onclick="addRightNode();">增加根节点</li>
	</ul>
 </div>
<div class="zTreeDemoBackground left">
	<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>